<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <input type="file" @change="uploadFile" ref="file" multiple="multiple"/>
    <img :src="tu" width="100px" height="100px" v-if="tu"/>
</div>

<script>
    // var data={tu:''}
    var app=new Vue({
        el:'#app',
        // data:data,
        data:{
            tu:''
        },
        methods: {
            uploadFile: function (e) {
                // var image=this.$refs.file.files[0];
                // var data=new FormData();
                // data.append("image",image);
                var image = e.target.files[0];//获取文件变量
                var formdata = new FormData();//表单对象
                formdata.append("image", image);//将文件放入表单中
                axios.post('/nsd_springboot20210906/upload', formdata).then(function (response) {
                    app.tu = response.data;
                }).catch(function (err) {
                    console.log(err)
                });
            }
        }
    });
</script>
</body>
</html>